<template>
  <el-dialog v-if="load" title="更新授权" v-model="visible" append-to-body :close-on-click-modal="false" :z-index="2000" width="800px" @close="handleClose">
    <el-form label-position="top">
      <div class="v-title">授权信息</div>
      <el-form-item label="开发者账号授权">
        <el-checkbox-group v-model="form.checkeds" @change="areaChange">
          <el-checkbox v-for="d in data" :key="d.ad_id" :label="d.ad_id">{{d.name}} <span
              :class="['ml-2', d.auth_status_desc === '未授权' ? 'text-red-500' : 'text-green-600']">{{d.auth_status_desc}}</span></el-checkbox>
        </el-checkbox-group>
        <div class="text-red-600">点击登录亚马逊授权将跳转到亚马逊卖家后台，请在常用环境操作，避免关联</div>
      </el-form-item>
      <el-form-item label="授权区域">
        <VSelect v-model="form.area" placeholder="请选择" :options="form.areaOptions" class="w-full" @change="areaChange" />
      </el-form-item>
      <el-form-item label="授权详情">
        <div class="flex flex-col gap-2 w-full">
          <template v-for="da in data" :key="da.ad_id">
            <div v-if="form.checkeds.includes(da.ad_id) && authIndex > -1" class="bg-gray-100 w-full p-2 rounded-md relative">
              <div>{{da.name}}</div>
              <el-checkbox-group v-model="da.checkeds">
                <el-checkbox v-for="d in da.area[authIndex].auth_site" :key="d.site_id" :label="d.site_id">{{d.site_name}}</el-checkbox>
              </el-checkbox-group>
              <div class="flex items-center gap-2">
                <el-button type="primary" :loading="loadings[da.ad_id]" @click="auth(da)">授权</el-button>
                <div :class="da.area[authIndex].area_auth_desc === '未授权' ? 'text-red-500' : 'text-green-600'">{{da.area[authIndex].area_auth_desc}}</div>
              </div>
              <el-icon class="absolute right-2 top-2 hover:text-blue-600 cursor-pointer" @click="form.checkeds.splice(form.checkeds.indexOf(da.ad_id), 1)">
                <CloseBold />
              </el-icon>
            </div>
          </template>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">关 闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import api from './api'
import { ElMessage } from 'element-plus'
import { handleLink } from './utils'

const props = defineProps({
  options: { type: Object, default: () => ({}) },
})
const emit = defineEmits(['close', 'success'])

const load = ref(false)
const visible = ref(false)
let loadings = reactive({})
const data = ref({})
const form = ref({})

const authIndex = computed(() => form.value.areaOptions?.findIndex(d => d.value === form.value.area))

const areaChange = () => {
  const index = form.value.areaOptions?.findIndex(d => d.value === form.value.area)
  data.value.forEach(d => {
    d.checkeds = d.area[index].auth_site.reduce((acc, cur) => cur.site_auth_status === 1 ? acc.concat(cur.site_id) : acc, [])
  })
}

const auth = (da) => {
  const { ad_id, checkeds: site_ids, area, type } = da
  const { area: auth_area } = form.value
  const { shop_id } = area[authIndex.value]
  loadings[ad_id] = true
  handleLink({ ad_id, auth_area, shop_id, site_ids, type })
  loadings[ad_id] = false
}

// 打开弹窗
const open = async ({ shop_id }) => {
  if (!load.value) {
    load.value = true
    await 1
  }
  loadings = reactive({})
  visible.value = true
  const res = await api.authDetail({ shop_id })
  data.value = res.data
  form.value = {
    ad_ids: [],
    area: null,
    checkeds: [],
    areaOptions: data.value[0].area.map(d => ({ label: d.auth_name, value: d.auth_id, ...d }))
  }
  form.value.area = form.value.areaOptions[0].value
}
// 关闭弹窗
const close = async () => {
  visible.value = false
  await 1
  form.value = {}
}

const handleClose = () => {
  emit('close')
}

defineExpose({ open })
</script>